<div class="content-section introduction">
    <div>
        <h1>Form Layout</h1>
        <p>Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeNG as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>,
        a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
    </div>
    <app-inputStyleSwitch></app-inputStyleSwitch>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Vertical</h5>
        <div class="p-fluid">
            <div class="p-field">
                <label for="firstname1">Firstname</label>
                <input id="firstname1" type="text" pInputText> 
            </div>
            <div class="p-field">
                <label for="lastname1">Lastname</label>
                <input id="lastname1" type="text" pInputText> 
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Vertical and Grid</h5>
        <div class="p-fluid p-formgrid p-grid">
                <div class="p-field p-col">
                <label for="firstname2">Firstname</label>
                <input id="firstname2" type="text" pInputText> 
            </div>
            <div class="p-field p-col">
                <label for="lastname2">Lastname</label>
                <input id="lastname2" type="text" pInputText> 
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Horizontal and Fixed Width</h5>
        <div class="p-field p-grid">
            <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
            <div class="p-col">
                <input id="firstname3" type="text" pInputText> 
            </div>
        </div>
        <div class="p-field p-grid">
            <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
            <div class="p-col">
                <input id="lastname3" type="text" pInputText> 
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Horizontal and Fluid</h5>
        <div class="p-fluid">
            <div class="p-field p-grid">
                <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
                <div class="p-col-12 p-md-10">
                    <input id="firstname4" type="text" pInputText> 
                </div>
            </div>
            <div class="p-field p-grid">
                <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
                <div class="p-col-12 p-md-10">
                    <input id="lastname4" type="text" pInputText> 
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Inline</h5>
        <div class="p-formgroup-inline">
            <div class="p-field">
                <label for="firstname5" class="p-sr-only">Firstname</label>
                <input id="firstname5" type="text" pInputText placeholder="Firstname"> 
            </div>
            <div class="p-field">
                <label for="lastname5" class="p-sr-only">Lastname</label>
                <input id="lastname5" type="text" pInputText placeholder="Lastname"> 
            </div>
            <button pButton pRipple type="button" label="Submit"></button>
        </div>
    </div>

    <div class="card">
        <h5>Vertical Checkbox</h5>
        <div class="p-field-checkbox">
            <p-checkbox name="city1" value="Chicago" [(ngModel)]="cities1" inputId="city1"></p-checkbox>
            <label for="city1">Chicago</label>
        </div>
        <div class="p-field-checkbox">
            <p-checkbox name="city2" value="Los Angeles" [(ngModel)]="cities1" inputId="city2"></p-checkbox>
            <label for="city2">Los Angeles</label>
        </div>

        <h5>Horizontal Checkbox</h5>
        <div class="p-formgroup-inline">
            <div class="p-field-checkbox">
                <p-checkbox name="city3" value="Chicago" [(ngModel)]="cities2" inputId="city3"></p-checkbox>
                <label for="city3">Chicago</label>
            </div>
            <div class="p-field-checkbox">
                <p-checkbox name="city4" value="Los Angeles" [(ngModel)]="cities2" inputId="city4"></p-checkbox>
                <label for="city4">Los Angeles</label>
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Vertical RadioButton</h5>
        <div class="p-field-radiobutton">
            <p-radioButton name="city5" value="Chicago" [(ngModel)]="city1" inputId="city5"></p-radioButton>
            <label for="city5">Chicago</label>
        </div>
        <div class="p-field-radiobutton">
            <p-radioButton name="city6" value="Los Angeles" [(ngModel)]="city1" inputId="city6"></p-radioButton>
            <label for="city6">Los Angeles</label>
        </div>

        <h5>Horizontal RadioButton</h5>
        <div class="p-formgroup-inline">
            <div class="p-field-radiobutton">
            <p-radioButton name="city7" value="Chicago" [(ngModel)]="city2" inputId="city7"></p-radioButton>
            <label for="city7">Chicago</label>
            </div>
            <div class="p-field-radiobutton">
                <p-radioButton name="city8" value="Los Angeles" [(ngModel)]="city2" inputId="city8"></p-radioButton>
                <label for="city8">Los Angeles</label>
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Help Text</h5>
        <div class="p-field p-fluid">
            <label for="username">Username</label>
            <input id="username" type="username" pInputText aria-describedby="username-help"> 
            <small id="username-help">Enter your username to reset your password.</small>
        </div>
    </div>

    <div class="card">
        <h5>Advanced</h5>
        <div class="p-fluid p-formgrid p-grid">
            <div class="p-field p-col-12 p-md-6">
                <label for="firstname6">Firstname</label>
                <input id="firstname6" type="text" pInputText> 
            </div>
            <div class="p-field p-col-12 p-md-6">
                <label for="lastname6">Lastname</label>
                <input id="lastname6" type="text" pInputText> 
            </div>
            <div class="p-field p-col-12">
                <label for="address">Address</label>
                <textarea id="address" type="text" rows="4" pInputTextarea></textarea>
            </div>
            <div class="p-field p-col-12 p-md-6">
                <label for="city">City</label>
                <input id="city" type="text" pInputText> 
            </div>
            <div class="p-field p-col-12 p-md-3">
                <label for="state">State</label>
                <p-dropdown inputId="state" [options]="states" [(ngModel)]="selectedState" placeholder="Select" optionLabel="name"></p-dropdown>
            </div>
            <div class="p-field p-col-12 p-md-3">
                <label for="zip">Zip</label>
                <input id="zip" type="text" pInputText> 
            </div>
        </div>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Getting Started</h5>
            <p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-field"&gt;
    &lt;label for="fieldId"&gt;Label&lt;/label&gt;
    &lt;input id="fieldId" type="text" pInputText&gt; 
&lt;/div&gt;
</app-code>

            <h5>Vertical Layout</h5>
            <p>In its simplest form, a vertical layout is created when used within <i>.p-fluid</i> that makes the components use all available width.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-fluid"&gt;
    &lt;div class="p-field"&gt;
        &lt;label for="firstname1"&gt;Firstname&lt;/label&gt;
        &lt;input id="firstname1" type="text" pInputText&gt; 
    &lt;/div&gt;
    &lt;div class="p-field"&gt;
        &lt;label for="lastname1"&gt;Lastname&lt;/label&gt;
        &lt;input id="lastname1" type="text" pInputText&gt; 
    &lt;/div&gt;
&lt;/div&gt;
</app-code>

            <h5>Vertical Layout with Grid</h5>
            <p>This is where FormLayout actually hooks-in to PrimeFlex with the help of <i>.p-formgrid</i> class to optimize the content for form design. Example
            below arranges two fields to be displayed next two each other.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-fluid p-formgrid p-grid"&gt;
    &lt;div class="p-field p-col"&gt;
        &lt;label for="firstname1"&gt;Firstname&lt;/label&gt;
        &lt;input id="firstname1" type="text" pInputText&gt; 
    &lt;/div&gt;
    &lt;div class="p-field p-col"&gt;
        &lt;label for="lastname1"&gt;Lastname&lt;/label&gt;
        &lt;input id="lastname1" type="text" pInputText&gt; 
    &lt;/div&gt;
&lt;/div&gt;
</app-code>

            <h5>Horizontal and Fixed Width</h5>
            <p>In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this
                example, label has a fixed width where container of the inputs gets the remaining space.
            </p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-field p-grid"&gt;
    &lt;label for="firstname3" class="p-col-fixed" style="width:100px"&gt;Firstname&lt;/label&gt;
    &lt;div class="p-col"&gt;
        &lt;input id="firstname3" type="text" pInputText&gt; 
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-field p-grid"&gt;
    &lt;label for="lastname3" class="p-col-fixed" style="width:100px"&gt;Lastname&lt;/label&gt;
    &lt;div class="p-col"&gt;
        &lt;input id="lastname3" type="text" pInputText&gt; 
    &lt;/div&gt;
&lt;/div&gt;
</app-code>

            <h5>Horizontal and Fluid</h5>
            <p>Wrapping the form in the previous example with <i>.p-fluid</i> and removing the fixed width results in a fluid layout.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-fluid"&gt;
    &lt;div class="p-field p-grid"&gt;
        &lt;label for="firstname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Firstname&lt;/label&gt;
        &lt;div class="p-col-12 p-md-10"&gt;
            &lt;input id="firstname" type="text" pInputText&gt; 
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-field p-grid"&gt;
        &lt;label for="lastname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Lastname&lt;/label&gt;
        &lt;div class="p-col-12 p-md-10"&gt;
            &lt;input id="lastname" type="text" pInputText&gt; 
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</app-code> 


            <h5>Inline</h5>
            <p>Inline forms are used to display the content on the same row and can simply be implemented by adding <i>.p-formgroup-inline</i> to the form container. Note that per design requirements, if labels
                are not visually hidden, it is suggested to use <i>.p-sr-only</i> to still support screen readers.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-formgroup-inline"&gt;
    &lt;div class="p-field"&gt;
        &lt;label for="firstname" class="p-sr-only"&gt;Firstname&lt;/label&gt;
        &lt;input id="firstname" type="text" pInputText placeholder="Firstname"&gt; 
    &lt;/div&gt;
    &lt;div class="p-field"&gt;
        &lt;label for="lastname" class="p-sr-only"&gt;Lastname&lt;/label&gt;
        &lt;input id="lastname" type="text" pInputText placeholder="Lastname"&gt; 
    &lt;/div&gt;
    &lt;button pButton type="button" label="Submit"&gt;&lt;/button&gt;
&lt;/div&gt;
</app-code>

            <h5>Checkbox and RadioButton</h5>
            <p>Checkbox and RadioButton have exclusive layout support via <i>.p-field-checkbox</i> and <i>.p-field-radiobutton</i> classes respectively.
                Examples here demonstrates vertical and horizontal layout alternatives.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h3&gt;Vertical Checkbox&lt;/h3&gt;
&lt;div class="p-field-checkbox"&gt;
    &lt;p-checkbox name="city1" value="Chicago" [(ngModel)]="cities1" inputId="city1"&gt;&lt;/p-checkbox&gt;
    &lt;label for="city1"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-checkbox"&gt;
    &lt;p-checkbox name="city2" value="Los Angeles" [(ngModel)]="cities1" inputId="city2"&gt;&lt;/p-checkbox&gt;
    &lt;label for="city2"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;

&lt;h3&gt;Horizontal Checkbox&lt;/h3&gt;
&lt;div class="p-formgroup-inline"&gt;
    &lt;div class="p-field-checkbox"&gt;
        &lt;p-checkbox name="city3" value="Chicago" [(ngModel)]="cities2" inputId="city3"&gt;&lt;/p-checkbox&gt;
        &lt;label for="city3"&gt;Chicago&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="p-field-checkbox"&gt;
        &lt;p-checkbox name="city4" value="Los Angeles" [(ngModel)]="cities2" inputId="city4"&gt;&lt;/p-checkbox&gt;
        &lt;label for="city4"&gt;Los Angeles&lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;
</app-code>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h3&gt;Vertical RadioButton&lt;/h3&gt;
&lt;div class="p-field-radiobutton"&gt;
    &lt;p-radioButton name="city5" value="Chicago" [(ngModel)]="city1" inputId="city5"&gt;&lt;/p-radioButton&gt;
    &lt;label for="city5"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-radiobutton"&gt;
    &lt;p-radioButton name="city6" value="Los Angeles" [(ngModel)]="city1" inputId="city6"&gt;&lt;/p-radioButton&gt;
    &lt;label for="city6"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;

&lt;h3&gt;Horizontal RadioButton&lt;/h3&gt;
&lt;div class="p-formgroup-inline"&gt;
    &lt;div class="p-field-checkbox"&gt;
    &lt;p-radioButton name="city7" value="Chicago" [(ngModel)]="city2" inputId="city7"&gt;&lt;/p-radioButton&gt;
    &lt;label for="city7"&gt;Chicago&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="p-field-checkbox"&gt;
        &lt;p-radioButton name="city8" value="Los Angeles" [(ngModel)]="city2" inputId="city8"&gt;&lt;/p-radioButton&gt;
        &lt;label for="city8"&gt;Los Angeles&lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;
</app-code>

            <h5>Helper text</h5>
            <p>Helper text is an optional element defined with the <i>small</i> tag to display additional information about the input field.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-field p-fluid"&gt;
    &lt;label for="username"&gt;Username&lt;/label&gt;
    &lt;input id="username" type="username" pInputText aria-describedby="username-help"&gt; 
    &lt;small id="username-help"&gt;Enter your username to reset your password.&lt;/small&gt;
&lt;/div&gt;
</app-code>

            <h5>Advanced Forms</h5>
            <p>A responsive form with various input fields can easily be implemented using a combination of <i>.p-field</i>, <i>.p-formgrid</i> and <i>.p-fluid</i>.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-fluid p-formgrid p-grid"&gt;
    &lt;div class="p-field p-col-12 p-md-6"&gt;
        &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
        &lt;input id="firstname" type="text" pInputText&gt; 
    &lt;/div&gt;
    &lt;div class="p-field p-col-12 p-md-6"&gt;
        &lt;label for="lastname"&gt;Lastname&lt;/label&gt;
        &lt;input id="lastname" type="text" pInputText&gt; 
    &lt;/div&gt;
    &lt;div class="p-field p-col-12"&gt;
        &lt;label for="address"&gt;Address&lt;/label&gt;
        &lt;textarea id="address" type="text" rows="4" pInputTextarea&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div class="p-field p-col-12 p-md-6"&gt;
        &lt;label for="city"&gt;City&lt;/label&gt;
        &lt;input id="city" type="text" pInputText&gt; 
    &lt;/div&gt;
    &lt;div class="p-field p-col-12 p-md-3"&gt;
        &lt;label for="state"&gt;State&lt;/label&gt;
        &lt;p-dropdown inputId="state" [options]="states" [(ngModel)]="selectedState" placeholder="Select" optionLabel="name"&gt;&lt;/p-dropdown&gt;
    &lt;/div&gt;
    &lt;div class="p-field p-col-12 p-md-3"&gt;
        &lt;label for="zip"&gt;Zip&lt;/label&gt;
        &lt;input id="zip" type="text" pInputText&gt; 
    &lt;/div&gt;
&lt;/div&gt;
</app-code>

            <h5>Customization</h5>
            <p>FormLayout comes with sensible defaults, in case these values need to be customized suggested way is building <a href="https://github.com/primefaces/primeflex/blob/master/primeflex.scss">primeflex.scss</a> with your on variables.</p>

            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Variable</th>
                            <th>Default</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>$fieldMargin</td>
                            <td>1em</td>
                        </tr>
                        <tr>
                            <td>$fieldLabelMargin</td>
                            <td>.5em</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/primeflex" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-formlayout-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card"&gt;
    &lt;h5&gt;Vertical&lt;/h5&gt;
    &lt;div class="p-fluid"&gt;
        &lt;div class="p-field"&gt;
            &lt;label for="firstname1"&gt;Firstname&lt;/label&gt;
            &lt;input id="firstname1" type="text" pInputText&gt; 
        &lt;/div&gt;
        &lt;div class="p-field"&gt;
            &lt;label for="lastname1"&gt;Lastname&lt;/label&gt;
            &lt;input id="lastname1" type="text" pInputText&gt; 
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Vertical and Grid&lt;/h5&gt;
    &lt;div class="p-fluid p-formgrid p-grid"&gt;
            &lt;div class="p-field p-col"&gt;
            &lt;label for="firstname2"&gt;Firstname&lt;/label&gt;
            &lt;input id="firstname2" type="text" pInputText&gt; 
        &lt;/div&gt;
        &lt;div class="p-field p-col"&gt;
            &lt;label for="lastname2"&gt;Lastname&lt;/label&gt;
            &lt;input id="lastname2" type="text" pInputText&gt; 
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Horizontal and Fixed Width&lt;/h5&gt;
    &lt;div class="p-field p-grid"&gt;
        &lt;label for="firstname3" class="p-col-fixed" style="width:100px"&gt;Firstname&lt;/label&gt;
        &lt;div class="p-col"&gt;
            &lt;input id="firstname3" type="text" pInputText&gt; 
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-field p-grid"&gt;
        &lt;label for="lastname3" class="p-col-fixed" style="width:100px"&gt;Lastname&lt;/label&gt;
        &lt;div class="p-col"&gt;
            &lt;input id="lastname3" type="text" pInputText&gt; 
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Horizontal and Fluid&lt;/h5&gt;
    &lt;div class="p-fluid"&gt;
        &lt;div class="p-field p-grid"&gt;
            &lt;label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Firstname&lt;/label&gt;
            &lt;div class="p-col-12 p-md-10"&gt;
                &lt;input id="firstname4" type="text" pInputText&gt; 
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="p-field p-grid"&gt;
            &lt;label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Lastname&lt;/label&gt;
            &lt;div class="p-col-12 p-md-10"&gt;
                &lt;input id="lastname4" type="text" pInputText&gt; 
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Inline&lt;/h5&gt;
    &lt;div class="p-formgroup-inline"&gt;
        &lt;div class="p-field"&gt;
            &lt;label for="firstname5" class="p-sr-only"&gt;Firstname&lt;/label&gt;
            &lt;input id="firstname5" type="text" pInputText placeholder="Firstname"&gt; 
        &lt;/div&gt;
        &lt;div class="p-field"&gt;
            &lt;label for="lastname5" class="p-sr-only"&gt;Lastname&lt;/label&gt;
            &lt;input id="lastname5" type="text" pInputText placeholder="Lastname"&gt; 
        &lt;/div&gt;
        &lt;button pButton pRipple type="button" label="Submit"&gt;&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Vertical Checkbox&lt;/h5&gt;
    &lt;div class="p-field-checkbox"&gt;
        &lt;p-checkbox name="city1" value="Chicago" [(ngModel)]="cities1" inputId="city1"&gt;&lt;/p-checkbox&gt;
        &lt;label for="city1"&gt;Chicago&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="p-field-checkbox"&gt;
        &lt;p-checkbox name="city2" value="Los Angeles" [(ngModel)]="cities1" inputId="city2"&gt;&lt;/p-checkbox&gt;
        &lt;label for="city2"&gt;Los Angeles&lt;/label&gt;
    &lt;/div&gt;

    &lt;h5&gt;Horizontal Checkbox&lt;/h5&gt;
    &lt;div class="p-formgroup-inline"&gt;
        &lt;div class="p-field-checkbox"&gt;
            &lt;p-checkbox name="city3" value="Chicago" [(ngModel)]="cities2" inputId="city3"&gt;&lt;/p-checkbox&gt;
            &lt;label for="city3"&gt;Chicago&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="p-field-checkbox"&gt;
            &lt;p-checkbox name="city4" value="Los Angeles" [(ngModel)]="cities2" inputId="city4"&gt;&lt;/p-checkbox&gt;
            &lt;label for="city4"&gt;Los Angeles&lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Vertical RadioButton&lt;/h5&gt;
    &lt;div class="p-field-radiobutton"&gt;
        &lt;p-radioButton name="city5" value="Chicago" [(ngModel)]="city1" inputId="city5"&gt;&lt;/p-radioButton&gt;
        &lt;label for="city5"&gt;Chicago&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="p-field-radiobutton"&gt;
        &lt;p-radioButton name="city6" value="Los Angeles" [(ngModel)]="city1" inputId="city6"&gt;&lt;/p-radioButton&gt;
        &lt;label for="city6"&gt;Los Angeles&lt;/label&gt;
    &lt;/div&gt;

    &lt;h5&gt;Horizontal RadioButton&lt;/h5&gt;
    &lt;div class="p-formgroup-inline"&gt;
        &lt;div class="p-field-checkbox"&gt;
        &lt;p-radioButton name="city7" value="Chicago" [(ngModel)]="city2" inputId="city7"&gt;&lt;/p-radioButton&gt;
        &lt;label for="city7"&gt;Chicago&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="p-field-checkbox"&gt;
            &lt;p-radioButton name="city8" value="Los Angeles" [(ngModel)]="city2" inputId="city8"&gt;&lt;/p-radioButton&gt;
            &lt;label for="city8"&gt;Los Angeles&lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Help Text&lt;/h5&gt;
    &lt;div class="p-field p-fluid"&gt;
        &lt;label for="username"&gt;Username&lt;/label&gt;
        &lt;input id="username" type="username" pInputText aria-describedby="username-help"&gt; 
        &lt;small id="username-help"&gt;Enter your username to reset your password.&lt;/small&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Advanced&lt;/h5&gt;
    &lt;div class="p-fluid p-formgrid p-grid"&gt;
        &lt;div class="p-field p-col-12 p-md-6"&gt;
            &lt;label for="firstname6"&gt;Firstname&lt;/label&gt;
            &lt;input id="firstname6" type="text" pInputText&gt; 
        &lt;/div&gt;
        &lt;div class="p-field p-col-12 p-md-6"&gt;
            &lt;label for="lastname6"&gt;Lastname&lt;/label&gt;
            &lt;input id="lastname6" type="text" pInputText&gt; 
        &lt;/div&gt;
        &lt;div class="p-field p-col-12"&gt;
            &lt;label for="address"&gt;Address&lt;/label&gt;
            &lt;textarea id="address" type="text" rows="4" pInputTextarea&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class="p-field p-col-12 p-md-6"&gt;
            &lt;label for="city"&gt;City&lt;/label&gt;
            &lt;input id="city" type="text" pInputText&gt; 
        &lt;/div&gt;
        &lt;div class="p-field p-col-12 p-md-3"&gt;
            &lt;label for="state"&gt;State&lt;/label&gt;
            &lt;p-dropdown inputId="state" [options]="states" [(ngModel)]="selectedState" placeholder="Select" optionLabel="name"&gt;&lt;/p-dropdown&gt;
        &lt;/div&gt;
        &lt;div class="p-field p-col-12 p-md-3"&gt;
            &lt;label for="zip"&gt;Zip&lt;/label&gt;
            &lt;input id="zip" type="text" pInputText&gt; 
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
    export class FormLayoutDemo &#123;

        selectedState: any = null;
    
        states: any[] = [
            &#123;name: 'Arizona', code: 'Arizona'&#125;,
            &#123;name: 'California', value: 'California'&#125;,
            &#123;name: 'Florida', code: 'Florida'&#125;,
            &#123;name: 'Ohio', code: 'Ohio'&#125;,
            &#123;name: 'Washington', code: 'Washington'&#125;
        ];
    
        cities1: any[] = [];
        
        cities2: any[] = [];
        
        city1:any = null;
    
        city2:any = null;

    &#125;
    </app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-formlayout-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>